<template>
  <div class="container">
    <header class="header"> </header>
    <div class="intro-header">
      <var-input placeholder="搜索作品" clearable v-model="query" enterkeyhint="done" @blur="search" @change="search">
        <template #append-icon>
          <var-icon class="append-icon" name="magnify" />
        </template>
      </var-input>
    </div>
    <van-floating-bubble class="bubble-style" v-model:offset="offset" icon="edit" @click="editClick" />
    <var-tabs-items v-model:active="active">
      <var-tab-item name="travelPlan">
        <div class="btn-wrap">
          <var-list finished-text="没有更多了" error-text="出错了出错了" :finished="finished" v-model:loading="loading" @load="load">
            <var-cell :key="item.id" v-for="item in rusticList">
              <var-card
                :title="item.name"
                :subtitle="'乡村:' + item.rusticName"
                :description="'发布于: ' + formatToDateTime(item.publishTime, valueFormat)"
                :src="getFileHttpUrl(item.cover)"
                layout="column"
                @click="detailClick(item.id)"
              >
                <template #extra>
                  <var-space class="chip-style">
                    <var-chip v-if="item.auditStatus === AuditStatusEnum.PASS" size="small" type="success">审核通过</var-chip>
                    <var-chip v-if="item.auditStatus === AuditStatusEnum.NOT_PASS" size="small" type="warning">审核不通过</var-chip>
                    <var-chip v-if="item.auditStatus === AuditStatusEnum.WAIT_AUDIT" size="small" type="info">待审核</var-chip>
                  </var-space>
                  <var-space>
                    <var-button text round>
                      <var-icon name="star" />
                      <td>{{ item.collectionCount }}</td>
                    </var-button>
                    <var-button round text>
                      <var-icon name="heart" />
                      <td>{{ item.likeCount }}</td>
                    </var-button>
                  </var-space>
                </template>
              </var-card>
            </var-cell>
          </var-list>
        </div>
      </var-tab-item>
    </var-tabs-items>
  </div>
</template>

<script lang="ts" setup name="addListPage">
  import { useUserStore } from '@/store/modules/user';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import type { Dayjs } from 'dayjs';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { getWorksList } from '@/api/travelPlan';
  import { AuditStatusEnum } from '@/enums/auditEnum';

  // const { locale } = useI18n();
  const router = useRouter();
  const active = ref('travelPlan');
  const query = ref('');
  const list = ref([]);
  let current = 1;
  const loading = ref(false);
  const valueFormat = 'YYYY-MM-DD HH:mm';

  const userStore = useUserStore();

  const offset = ref({
    y: 700,
  });
  const finished = ref(false);
  const rusticList = ref<
    {
      id: number;
      name: string;
      cover: string;
      publishTime: Dayjs;
      updateTime: string;
      createTime: string;
      likeCount: number;
      collectionCount: number;
      browseCount: number;
      collection: boolean;
      like: boolean;
      rusticName: string;
      auditStatus: number;
    }[]
  >([]);

  const getList = async () => {
    const res = await getWorksList({ rusticId: undefined, name: query.value, current: current, size: 10 });

    if (res) {
      current = res.data.current + 1;
      if (res.data.total == 0) {
        finished.value = true;
        return;
      }
      setListData(res.data.current > 1 ? [...list.value, ...res.data.records] : (res.data.records as any[]));
      rusticList.value = list.value.map(
        (item: {
          id: number;
          name: string;
          cover: string;
          publishTime: Dayjs;
          updateTime: string;
          createTime: string;
          likeCount: number;
          collectionCount: number;
          browseCount: number;
          collection: boolean;
          like: boolean;
          rusticName: string;
          auditStatus: number;
        }) => ({
          id: item.id,
          name: item.name,
          cover: item.cover,
          publishTime: item.publishTime,
          updateTime: item.updateTime,
          createTime: item.createTime,
          likeCount: item.likeCount,
          collectionCount: item.collectionCount,
          browseCount: item.browseCount,
          collection: item.collection,
          like: item.like,
          rusticName: item.rusticName,
          auditStatus: item.auditStatus,
        }),
      );
      // 将映射后的新数据追加到 rusticList 中
      // rusticList.value.push(...rusticListTemp.value);
      if (rusticList.value.length == 0) {
        finished.value = true;
      }
      return res.data.record;
    }
  };
  const setListData = (data: any) => {
    list.value = data;
  };
  const load = () => {
    setTimeout(() => {
      getList();
      loading.value = false;
    }, 1000);
  };

  /**
   * 查询的时候清空原来的数据
   */
  const search = () => {
    loading.value = true;
    list.value = [];
    current = 1;
    load();
    // 若是没有数据则清空原来的数据
    if (list.value.length == 0) {
      rusticList.value = [];
    }
    // console.info('失焦后数据 ===> ', list);
  };

  /**
   * 卡片点击跳转页面
   */
  const editClick = () => {
    router.push({ path: '/addTravelPlan' });
  };

  const detailClick = (id: number) => {
    router.push({ path: '/editTravelPlan', query: { id: id } });
  };

  // const changeLang = (type) => {
  //   setLang(type);
  // };

  onMounted(() => {});
</script>
<style lang="scss">
  .container {
    .bubble-style {
      margin-top: 15px;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 40px;
    background: #faf2d0;
    img {
      width: 90px;
      height: 90px;
    }
  }

  .intro-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
    width: 100%;
  }

  .supportList {
    margin: 0 16px;

    .nut-cell-group__title {
      margin-top: 30px;
    }
  }

  .btn-wrap {
    margin: 20px;
    padding-left: 30px;
    padding-right: 30px;
    .chip-style {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: flex-start; /* 靠左对齐 */
    }
  }

  .btn-confirm {
    @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
  }

  .tabs-example-icon {
    margin-bottom: 5px;
    width: 55px;
    height: 55px;
  }
  .tabs {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding:
      -5,
      -5;
    margin: 0;
    --color-primary: #f0f0f0;
    --color-on-primary: #4b7a74;
    --color-on-info: #000303;
    box-sizing: border-box;
  }
</style>
